<template>
    <div class="classify" :style="{height:clientHeight*0.8+'rem'}">
        <div class="classify-container">
            <div class="search">
                <div class="search-box">
                    <img src="~assets/icons/search.png" alt="">
                    <input type="search" placeholder="请输入您要查找的商品" v-model="searchContent" @focus="searchDetail($event)">
                </div>
            </div>
            <div class="classify-tab">
                <div class="tab-labels" :style="{maxHeight:clientHeight*0.8+'rem'}">
                    <div class="label" v-for="(item,index) in tabList" :key="index" :class="{labelActive: activeLabelNum == index}"  @click='changeTab(index,item.name,item.id)'>
                        <span>{{item.name}}</span>
                    </div>
                </div>
                <div class="tab-detail">
                    <div class="tab-detail-head">
                        <span>{{labelName}}</span>
                        <div class="more">
                            <span>全部商品</span>
                            <img src="~assets/icons/arrow.png" alt="">
                        </div>
                    </div>
                    <div class="tab-detail-list" :style="{maxHeight:clientHeight*0.8+'rem'}">
                        <div class="detail" v-for="(item,index) in realData" :key="index" >
                            <img :src="item['image_url']" alt="" @click='detailPage(item.name,item.id)'>
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import virtualData from './virtual'
import { Indicator } from 'mint-ui';

export default {
    name:'classify',
    data(){
        return {
            tabList:[],
            clientHeight:0,
            activeLabelNum:0,
            virtual:virtualData,
            realData:[],
            labelName:'',
            searchContent:'',
            oldId:-1
        }
    },
    methods:{
        searchDetail(ev){
            this.$router.push({path:'/search'});
        },
        changeTab(index,name,id){
            if(this.oldId == id){
                return;
            }
            let that = this;
            this.activeLabelNum = index;
            this.labelName = name;
            this.oldId = id;
            let token = localStorage.getItem('token');
            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            })
            that.$ajax(that, 'get', that.$api.classifyDetail+id, null, token, function(res){
                console.log(res);
                if(res.data['error_code'] == 0){
                    that.transferUrl(res.data.msg);
                    that.realData = res.data.msg;
                }else{
                    that.realData = [];
                }
                Indicator.close();
            })
        },
        detailPage(name,id){
            this.$store.state.oldTab = this.$store.state.tab;
            this.$store.state.tab = name;
            this.$router.push({path:'/container/classify_detail', query:{id:id}});
        },
        getClassifyList(){
            let that = this;
            let token = localStorage.getItem('token');
            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            })
            that.$ajax(that, 'get', that.$api.classifyList, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.tabList = res.data.msg;
                    that.labelName = that.tabList[0]['name'];
                    that.$ajax(that, 'get', that.$api.classifyDetail+that.tabList[0]['id'], null, token, function(res){
                        // console.log(res);
                        if(res.data['error_code'] == 0){
                            that.transferUrl(res.data.msg);
                            that.realData = res.data.msg;
                        }else{
                            that.realData = [];
                        }
                        Indicator.close();
                    })
                }else{
                    Indicator.close();
                }
            })
        }
    },
    mounted(){
        this.getClassifyList();
        let scale = window.devicePixelRatio;
        this.clientHeight = document.documentElement.clientHeight*scale/100;
        this.$store.state.tab = '分类';
    },
    activated(){
        this.$store.state.tab = '分类';
    },
    components:{
        Indicator
    }
}
</script>

<style lang='less'>
@rem:100rem;

.classify{
    width: 100%;
    background: #f7f7f7;
    .classify-container{
        margin-top: 88/@rem;
        margin-bottom: 98/@rem;
        .search{
            width: 100%;
            height: 70/@rem;
            box-sizing: border-box;
            padding: 0 20/@rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 30/@rem;
            .search-box{
                width: 80%;
                height: 58/@rem;
                box-sizing: border-box;
                border:2/@rem solid #eeeeee;
                border-radius: 16/@rem;
                display: flex;
                align-items: center;
                background: #fff;
                img{
                    height: 26/@rem;
                    width: 26/@rem;
                    margin: 0 20/@rem;
                }
                input{
                    width: 100%;
                    outline: none;
                    border: none;
                }
            }
        }
        .classify-tab{
            width: 100%;
            display: flex;
            margin-top: 20/@rem;
            .tab-labels{
                width: 178/@rem;
                overflow: scroll;
                margin-left: 6/@rem;
                .label{
                    width: 178/@rem;
                    height: 90/@rem;
                    box-sizing: border-box;
                    border-top: 2/@rem solid #eaeaea;
                    background: #fff; 
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    span{
                        font-size: 26/@rem;
                    }
                }
                .labelActive{
                    border-left: 4/@rem solid #6699ff;
                    background: #f7f7f7;
                    color: #6699ff; 
                }
            }
            .tab-detail{
                width: 534/@rem;
                margin-left: 20/@rem;
                .tab-detail-head{
                    width: 100%;
                    height: 92/@rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    span{
                        font-size: 24/@rem;
                    }
                    .more{
                        height: 100%;
                        display: flex;
                        align-items: center;
                        span{
                            color: #999;
                        }
                        img{
                            width: 22/@rem;
                            height: 22/@rem;
                            margin-left: 12/@rem;
                        }
                    }
                }
                .tab-detail-list{
                    display: flex;
                    flex-wrap: wrap;
                    background: #fff;
                    overflow: scroll;
                    .detail{
                        width: 178/@rem;
                        height: 218/@rem;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        margin-top: 20/@rem;
                        img{
                            height: 140/@rem;
                            width: 140/@rem;
                        }
                        span{
                            font-size: 22/@rem;
                            margin-top: 6/@rem;
                        }
                    }
                }
            }
        }
    }
}
</style>
